<template>
  <div class="house-property">
    <!--地名属性查询 -->
    <PagePanel :panelTitle="activePanel.panelTitle" @clickClose="clickClose">
      <el-select
        style="width: 100%; margin-bottom: 15px"
        v-model="value"
        filterable
        placeholder="请选择"
        @change="selectChange"
      >
        <el-option
          v-for="item in options"
          :key="item.typeid"
          :label="item.TypeName"
          :value="item.typeid"
        >
        </el-option>
      </el-select>
      <el-input
        clearable
        v-model="keyWord"
        @change="searchHouse"
        @clear="searchHouse"
        placeholder="输入地名名称关键字"
      ></el-input>
      <div class="list-content">
        <el-card
          style="margin-top: 10px"
          class="box-card"
          v-for="(area, index) in areaNamePropertySearchData"
          :key="index"
        >
          <div class="box-item">
            <div>
              <span style="font-weight: 700">地名信息：</span>
              <el-link
                style="margin-left: 130px"
                title="定位"
                :underline="false"
                class="el-icon-map-location"
                type="primary"
                @click="locationTo(area)"
              ></el-link>
            </div>
            <div
              class="box-item-item"
              v-for="(item, index) in area"
              :key="index"
            >
              <span>
                <span style="font-weight: 700">{{ item.name }}</span> :{{
                  item.value
                }}</span
              >
            </div>
          </div>
        </el-card>
        <el-card style="margin-top: 15px; overflow: auto">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="pagination.page"
            :page-size="pagination.pageSize"
            layout="total, prev, pager, next"
            :total="pagination.total"
          >
          </el-pagination>
        </el-card>
      </div>
    </PagePanel>
  </div>
</template>

<script>
import PagePanel from "@/components/PagePanel";
import request from "@/utils/request.js";
import { statistic_l1, statistic_l2, statistic_l3 } from "@/api/stat.js";
import markerImg from "../../../assets/img/addressNameSpace.png";
import { getAddressList } from "@/api/home.js";
export default {
  name: "AreaNamePropertySearch",
  components: { PagePanel },
  data() {
    return {
      keyWord: "",
      areaNamePropertySearchData: null,
      pagination: {
        total: 50,
        pageSize: 10,
        page: 1,
      },
      options: [],
      value: "12100",
      areaInfoName: [
        { name: "BiaoZhunMin", title: "名称" },
        // { name: "BieMing", title: "别名" },
        // { name: "CengYongMin", title: "曾用名" },
        { name: "LiShiYanGe", title: "历史沿革" },
        { name: "ZiLiaoLaiYu", title: "资料来源" },
        { name: "DiMingHanYi", title: "地名含义" },
        { name: "DiMingLaiLi", title: "地名来历" },
      ],
      that: this,
    };
  },
  computed: {
    activePanel() {
      return this.$store.state.activePanel;
    },
  },
  async mounted() {
    await this.getSelect();
    await this.getHouseNumPorpertySearchData();
  },
  methods: {
    removeAddressBillboard() {
      const flag = cesiumViewer.entities.getById("addressBillboard");
      if (flag) {
        cesiumViewer.entities.removeById("addressBillboard");
      }
    },
    locationTo(area) {
      const location = Cesium.Cartesian3.fromDegrees(...area[0].location);
      // window.cesiumViewer.camera.flyTo({
      //   destination: location,
      //   duration: 2,
      // });
      this.removeAddressBillboard();
      let entity = cesiumViewer.entities.add({
        id: "addressBillboard",
        position: location,
        // label: {
        //   font: "20px Helvetica", //设置文字大小和字体
        //   text: pick.primitive.properties.BiaoZhunMin,
        //   pixelOffset: new Cesium.Cartesian2(0, -90),
        // },
        billboard: {
          width: 80,
          height: 80,
          image: markerImg,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        },
      });

      cesiumViewer.flyTo(entity);
    },
    async getSelect() {
      const res = await statistic_l2();
      if (res.code === 20000) {
        let temp = JSON.parse(res.data);
        //过滤出TypeName不为空
        this.options = temp.filter((item) => item.TypeName);
        this.value = this.options[0].typeid;
      }
    },

    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagination.page = val;
      this.getHouseNumPorpertySearchData();
    },
    selectChange() {
      this.getHouseNumPorpertySearchData();
    },
    async getHouseNumPorpertySearchData() {
      const params = {
        page: this.pagination.page,
        pageSize: this.pagination.pageSize,
        daima: this.value,
        name: this.keyWord.trim(),
      };
      // await this.getDaimaNameFun();
      const res = await getAddressList(params);
      if (res.code === 20000 && res.data !== 0) {
        const info = JSON.parse(res.data);
        this.areaNamePropertySearchData = info.data.map((item) => {
          let obj = [];
          this.areaInfoName.map((areaInfo) => {
            let tempObj = {};
            tempObj.field = areaInfo.name; //字段名BiaoZhun
            tempObj.name = areaInfo.title; //字段别名 标准
            tempObj.value = item[areaInfo.name]; //值

            obj.push(tempObj);
          });
          let lon = Number(item.DongJing) / 10000;
          let lat = Number(item.BeiWei) / 10000;
          obj[0].location = [lon, lat];
          return obj;
        });
        this.pagination.total = info.count;
      } else {
        this.$message.info(res.msg);
      }
    },
    searchHouse() {
      this.pagination.page = 1;
      this.getHouseNumPorpertySearchData();
    },
    clickClose() {
      console.log("@@@@@@@@@@@@", this.activePanel);
    },
  },
  beforeDestroy() {
    this.removeAddressBillboard();

    // 因为面板都是用的v-if，会销毁面板，需要销毁的事件也可以写这里
  },
};
</script>
<style lang="less" scoped>
.house-property {
  .list-content {
    height: calc(100% - 75px);
    overflow-y: auto;
    .box-item {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      .box-item-item {
        margin: 5px 0;
      }
    }
  }
}
</style>
